import React,{Component} from "react"
import "./broadCast.css"

import { NavBar, Icon } from 'antd-mobile';

import {getSongLyrics,getSongUrl} from "../../api/index";

import bg from "../../assets/icon/mvbg.png"
import { parse } from "handlebars";

import {withRouter} from "react-router-dom"


var lycArr = [];
var lycTime =[]
class BroadCast extends Component{
    constructor(){
        super();
        this.state={
            url:"",
            lyric:[],
            bg:{
                url:'url('+bg +') no-repeat center center' 
            }
        }
    }
    componentWillUnmount(){
        this.setate = ()=>{
            return
        }
    }
    componentDidMount(){
  
        // console.log(this.props)
        var myaudio = document.getElementById("myaudio")
        // console.log(myaudio)
        myaudio.autoplay=true; 
        // console.log()
     

        getSongUrl(this.props.location.state.id).then(res=>{
            console.log(res)
            this.setState({
                url:res.data.data[0].url
            })
        })
        getSongLyrics(this.props.location.state.id).then(res=>{
            // console.log(res)
            // console.log(res.data.lrc.lyric.split("\n"))
            let SongArr= res.data.lrc.lyric.split("\n");
            // let SongArr = SongStr.split("/r");
            var i=0;
           let newSongArr = SongArr.map(item=>{
            //    console.log(item)
              
               if(item==""){
                   return
               }
               

               let reg = /^\[.+\]/;//正则表达式匹配 [02:06.540]只怕我自己会爱上你  里面的时间
            //    我们希望一个时间对应一句话 如  {
            //        "02:06.540" :只怕我自己会爱上你
            //    }
               //所以要拿到 [02:06.540]只怕我自己会爱上你 这里面的时间  可以用reg.exec
               //exec 如果完全匹配的话就直接返回这个对应的字符串了，如果仅仅是匹配才会返回一个伪数组，里面的第一项是我们需要的，所以我们要先判断item==""
               let key = reg.exec(item)[0]   //reg.exec()会返回一个伪数组，就第一个是有用的
            //    console.log(key)
               let SongObj = {
                   [key]: item.replace(reg,"")
               }
            //    lycTime
               lycArr.push( item.replace(reg,""))
            //    console.log(lycArr)
               lycTime[i++]=parseFloat(key.substr(1,3))*60+parseFloat(key.substr(4,11));
           })
        //    console.log(lycTime)
           var li = document.getElementsByTagName("li")
           var ul =document.getElementById("ul");
        //    console.log(ul)
           var songConent =document.getElementById("songConent");
           console.log(songConent.offsetTop)
        //    console.log(li)
           var x = songConent.offsetHeight/2
           ul.style.transform="translateY("+x+"px)";

        //    var li = document.getElementsByTagName("li")
           var currentLine = 1; //当前行
           var currentTime ; // 当前播放时间
           var ppxx;
           var myaudio = document.getElementById("myaudio") || "";
           console.log("myaudio=======",myaudio)
        
           
           myaudio.ontimeupdate = function(){
               console.log(myaudio,"update")
            if(!myaudio){
                return
            }
               console.log(123)
                 currentTime=myaudio.currentTime
                 console.log(currentTime+"last")
                 if(!li.length){
                     return 
                 }
                 for(let j=currentLine;j<lycTime.length;j++){
                     if(currentTime>lycTime[j] && currentTime<lycTime[j+1]){
                         currentLine=j;
                        //  console.log(j)
                        //  console.log(Math.floor(li[j].offsetHeight))
                         ppxx =x-currentLine*29;
                         ul.style.transform="translateY("+ppxx+"px)";
                        
                         li[j-1].className="";
                         li[j].className="red";
                       
                     }
                 }
                 //总的进度条的宽度
                 var slider = document.getElementById("slider");
                 //总时间
                 let alltime = myaudio.duration;
                //  console.log(alltime)
                //当前时间占总时间的百分比
                 let percent =Number(currentTime/alltime*100).toFixed(2);
                 percent +="%"
                //  console.log(percent)
                 //控制器
                 var slider_runway=document.getElementById("slider-runway");
                 //进度条
                 var slider_progress=document.getElementById("slider-progress");
                //   slider.offsetWidth/100*percent;
                slider_runway.style.left=percent;
                slider_progress.style.width=percent;
                // slider_runway
                //总的时间
                var Allminute = 0;
                var Allsecond = 0;
                //歌的总时长分钟
                Allminute =parseInt(alltime/60);
                if(Allminute<10){
                    Allminute ="0"+Allminute
                }
                // console.log(Allminute);
                 //歌的总时长秒数
                 Allsecond = parseInt(alltime%60);
                 if(Allsecond<10){
                    Allsecond = "0"+Allsecond
                }
                //  console.log(Allsecond)
                //得到对应的分钟：秒数的总时长
                 var Allstr = Allminute + ":"+Allsecond
                //  console.log(Allstr)
                 var time__end =document.getElementById("time__end");
                 time__end.innerHTML=Allstr;
                

                 //当前播放对应的时间
                 var nowminute = 0;
                 var nowsecond =0;
                 nowminute =parseInt(currentTime/60);
                if(nowminute<10){
                    nowminute ="0"+nowminute
                }
                // console.log(Allminute);
                 //歌的总时长秒数
                 nowsecond = parseInt(currentTime%60);
                //  console.log(nowsecond)
                 if(nowsecond<10){
                    nowsecond = "0"+nowsecond
                }
                //  console.log(Allsecond)
                //得到对应的分钟：秒数的总时长
                 var nowstr = nowminute + ":"+nowsecond;
                //  console.log(nowstr)
                // //  console.log(Allstr)
                 var time__current =document.getElementById("time__current");
                //  console.log(time__current)
                 time__current.innerHTML=nowstr;

                
                // console.log(slider_progress)
                if(currentTime===alltime){
                    document.getElementById("wrap").style.animationPlayState = "paused";
                    document.getElementById("wrap").style.WebkitAnimationPlayState = "paused";
                    // var ul =document.getElementById("ul");
        //    console.log(ul)
                    // var songConent =document.getElementById("songConent");
                    console.log(songConent.offsetTop)
                    //    console.log(li)
                    // var x = songConent.offsetHeight+songConent.offsetTop;
                    // console.log(x)
                    ul.style.transform="translateY("+x+"px)";
                    var CloseIcon =document.getElementById("CloseIcon");
                    var broadIcon =document.getElementById("broadIcon");
                    CloseIcon.style.display="none"
                    broadIcon.style.display="block";
                }

           }
           
           var slider = document.querySelector(".slider");
        //    console.log(slider)

           this.setState({
                lyric:lycArr
           })
        })
    }
     
    broadcast(){

       


        var myaudio = document.getElementById("myaudio");
        myaudio.play()
        // var ul =document.getElementById("ul");
        // var songConent =document.getElementById("songConent");
        document.getElementById("wrap").style.animationPlayState = "running";
        document.getElementById("wrap").style.WebkitAnimationPlayState = "running"; // 针对 Chrome 和 Safari 的代码
        // var x = songConent.offsetHeight+songConent.offsetTopss
        // ul.style.transform="translateY("+x+"px)";
        var CloseIcon =document.getElementById("CloseIcon");
        var broadIcon =document.getElementById("broadIcon");
        CloseIcon.style.display="block"
        broadIcon.style.display="none";
        
        // var myaudio = document.getElementById("myaudio")
        // console.log(myaudio)
        // myaudio.autoplay=true; 
        // console.log()
     

        getSongUrl(this.props.location.state.id).then(res=>{
            console.log(res)
            this.setState({
                url:res.data.data[0].url
            })
        })
        getSongLyrics(this.props.location.state.id).then(res=>{
            // console.log(res)
            // console.log(res.data.lrc.lyric.split("\n"))
            let SongArr= res.data.lrc.lyric.split("\n");
            // let SongArr = SongStr.split("/r");
            var i=0;
           let newSongArr = SongArr.map(item=>{
            //    console.log(item)
              
               if(item==""){
                   return
               }
               

               let reg = /^\[.+\]/;//正则表达式匹配 [02:06.540]只怕我自己会爱上你  里面的时间
            //    我们希望一个时间对应一句话 如  {
            //        "02:06.540" :只怕我自己会爱上你
            //    }
               //所以要拿到 [02:06.540]只怕我自己会爱上你 这里面的时间  可以用reg.exec
               //exec 如果完全匹配的话就直接返回这个对应的字符串了，如果仅仅是匹配才会返回一个伪数组，里面的第一项是我们需要的，所以我们要先判断item==""
               let key = reg.exec(item)[0]   //reg.exec()会返回一个伪数组，就第一个是有用的
            //    console.log(key)
               let SongObj = {
                   [key]: item.replace(reg,"")
               }
            //    lycTime
               lycArr.push( item.replace(reg,""))
            //    console.log(lycArr)
               lycTime[i++]=parseFloat(key.substr(1,3))*60+parseFloat(key.substr(4,11));
           })
           console.log(lycTime)
           var li = document.getElementsByTagName("li")
           var ul =document.getElementById("ul");
        //    console.log(ul)
           var songConent =document.getElementById("songConent");
           console.log(songConent.offsetTop)
        //    console.log(li)
           var x = songConent.offsetHeight+songConent.offsetTop
           ul.style.transform="translateY("+x+"px)";

        //    var li = document.getElementsByTagName("li")
           var currentLine = 1; //当前行
           var currentTime ; // 当前播放时间
           var ppxx;
           var myaudio = document.getElementById("myaudio")
           
           myaudio.ontimeupdate = function(){
                 currentTime=myaudio.currentTime
                //  console.log(currentTime)
                 for(let j=currentLine;j<lycTime.length;j++){
                     if(currentTime>lycTime[j] && currentTime<lycTime[j+1]){
                         currentLine=j;
                        //  console.log(j)
                        //  console.log(Math.floor(li[j].offsetHeight))
                         ppxx =x-currentLine*29;
                         ul.style.transform="translateY("+ppxx+"px)";
                         li[j-1].className="";
                         li[j].className="red";
                       
                     }
                 }
                 //总的进度条的宽度
                 var slider = document.getElementById("slider");
                 //总时间
                 let alltime = myaudio.duration;
                //  console.log(alltime)
                //当前时间占总时间的百分比
                 let percent =Number(currentTime/alltime*100).toFixed(2);
                 percent +="%"
                //  console.log(percent)
                 //控制器
                 var slider_runway=document.getElementById("slider-runway");
                 //进度条
                 var slider_progress=document.getElementById("slider-progress");
                //   slider.offsetWidth/100*percent;
                slider_runway.style.left=percent;
                slider_progress.style.width=percent;
                // slider_runway
                //总的时间
                var Allminute = 0;
                var Allsecond = 0;
                //歌的总时长分钟
                Allminute =parseInt(alltime/60);
                if(Allminute<10){
                    Allminute ="0"+Allminute
                }
                // console.log(Allminute);
                 //歌的总时长秒数
                 Allsecond = parseInt(alltime%60);
                 if(Allsecond<10){
                    Allsecond = "0"+Allsecond
                }
                //  console.log(Allsecond)
                //得到对应的分钟：秒数的总时长
                 var Allstr = Allminute + ":"+Allsecond
                //  console.log(Allstr)
                 var time__end =document.getElementById("time__end");
                 time__end.innerHTML=Allstr;
                

                 //当前播放对应的时间
                 var nowminute = 0;
                 var nowsecond =0;
                 nowminute =parseInt(currentTime/60);
                if(nowminute<10){
                    nowminute ="0"+nowminute
                }
                // console.log(Allminute);
                 //歌的总时长秒数
                 nowsecond = parseInt(currentTime%60);
                //  console.log(nowsecond)
                 if(nowsecond<10){
                    nowsecond = "0"+nowsecond
                }
                //  console.log(Allsecond)
                //得到对应的分钟：秒数的总时长
                 var nowstr = nowminute + ":"+nowsecond;
                //  console.log(nowstr)
                // //  console.log(Allstr)
                 var time__current =document.getElementById("time__current");
                //  console.log(time__current)
                 time__current.innerHTML=nowstr;

                
                // console.log(slider_progress)
                if(currentTime===alltime){
                    document.getElementById("wrap").style.animationPlayState = "paused";
                    document.getElementById("wrap").style.WebkitAnimationPlayState = "paused";
                    // var ul =document.getElementById("ul");
        //    console.log(ul)
                    // var songConent =document.getElementById("songConent");
                    console.log(songConent.offsetTop)
                    //    console.log(li)
                    // var x = songConent.offsetHeight+songConent.offsetTop;
                    // console.log(x)
                    ul.style.transform="translateY("+x+"px)";
                    var CloseIcon =document.getElementById("CloseIcon");
                    var broadIcon =document.getElementById("broadIcon");
                    CloseIcon.style.display="none"
                    broadIcon.style.display="block";
                }

           }
           
           var slider = document.querySelector(".slider");
        //    console.log(slider)

           this.setState({
                lyric:lycArr
           })
        })
        
    //  paused
    }

    pause(){
        var myaudio = document.getElementById("myaudio");
        myaudio.pause()
        var CloseIcon =document.getElementById("CloseIcon");
        var broadIcon =document.getElementById("broadIcon");
        CloseIcon.style.display="none"
        broadIcon.style.display="block";
        document.getElementById("wrap").style.animationPlayState = "paused";
        document.getElementById("wrap").style.WebkitAnimationPlayState = "paused"; // 针对 Chrome 和 Safari 的代码
    }
    sliderClick(e){
         
        var slider = document.getElementById("slider");
        var slider_progress=document.getElementById("slider-progress");
        var slider_runway=document.getElementById("slider-runway")
        console.log(slider_runway)
        var offsetX = e.clientX-slider.offsetLeft;
        // console.log(offsetX)
        // console.log(slider.offsetLeft)
        // console.log(e.clientX)
        // console.log(slider.offsetWidth)
        var left = offsetX/slider.offsetWidth;
        // console.log(left)
        left =Number(left*100).toFixed(3);
        if(left<=0){
            left=0;
            left +="%";
        }else if(left >=100){
            left=100;
            left +="%";
        }else{
            left +="%";
        }
        // left +="%";
       
        // console.log(left)
        slider_progress.style.width=left;
        slider_runway.style.left=left;
        var myaudio = document.getElementById("myaudio");
        // var slider_progress =document.getElementById("slider-progress");
        console.log(slider_progress.offsetWidth/270*myaudio.duration)
        myaudio.currentTime=slider_progress.offsetWidth/270*myaudio.duration
    }
    
    dotDown(e){
        var slider = document.getElementById("slider");
        var slider_runway=document.getElementById("slider-runway");
        var slider_progress=document.getElementById("slider-progress");
        console.log(e.touches[0].clientX)
        var spaceX = e.touches[0].clientX- slider_runway.offsetLeft+6;
        console.log(slider_runway.offsetLeft)
        console.log( spaceX)
        document.ontouchmove=function(evt){
                    // console.log(1111)
                    
                   var x = evt.touches[0].clientX-spaceX;
                   console.log(x)
                   x=x<0?0:x;
                  
                   console.log(slider_runway.offsetWidth)
                   x= x>=slider.offsetWidth-slider_runway.offsetWidth?slider.offsetWidth:x;
                //    console.log(slider.offsetWidth-slider_runway.offsetWidth)
                //    x=x>=slider.offsetWidth-slider_runway.offsetWidth?0:x;
                   x= x/slider.offsetWidth
                   console.log(x)
                   x =Number(x*100).toFixed(3);
  
                   x += "%"
                   slider_progress.style.width=x;
                   slider_runway.style.left=x;
                   var myaudio = document.getElementById("myaudio");
                    // var slider_progress =document.getElementById("slider-progress");
                    console.log(slider_progress.offsetWidth/270*myaudio.duration)
                    myaudio.currentTime=slider_progress.offsetWidth/270*myaudio.duration
                    } 
        
    }
    
    goback(){
        this.props.history.go(-1)
    }
   
    render(){
        console.log(this.props)
        // var nowSong = this.props.SongList.detailSongSheet.filter(item=>item.id===this.props.location.state);
        // console.log(nowSong)

        // console.log(this.props.location.state)
        let {url,lyric} =this.state
        console.log(this.props.location.state)
        // console.log(this.props)
        // console.log(this.state.bg)
     
        return(
            // <div>123</div>
            <div className="broadCast" style={{background:this.state.bg.url}}>
                    <audio src={url}  id="myaudio">

                    </audio>
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={this.goback.bind(this)}
                        rightContent={[
                            
                            <Icon key="1" type="ellipsis" />,
                        ]}
                        >
                        {this.props.location.state.name}
                    </NavBar>
                   
                   
                   <div className="imgRollOut">
                        <div className="imgRoll">
                                <div id="wrap">
                                    <div className="inner" >
                                    <img src={this.props.location.state.al.picUrl} />
                                    </div>
                                </div>
                            </div>
                   </div>
                   <div id="songConent">
                          <div id="ul">

                          {lyric.map((item,index)=>{
                              
                              return (
                                  <li key={index}><p>{item}</p></li>
                              )
                          })}
                          </div>
                          


                   </div>
                   <div id="ProgressBar">
                     
                        <span className="time__current" id="time__current">00:00</span>
                        <div id="proMain">
                             <div className="slider" id="slider" onClick={this.sliderClick.bind(this)}>
                                <div className="slider-progress" id="slider-progress" style={{width:"0%"}}></div>
                                
                                <div className="slider-runway" id="slider-runway" style={{left:"0%"}}  onTouchStart={this.dotDown.bind(this)}>
                                    <div className="thumb"></div>
                                </div>
                                 {/* <span id="dot"></span> */}
                             </div>
                        </div>
                        <span className="time__end" id="time__end">00:00</span>
                   </div>
                   <div className="BROfooter">
                          <span className="iconfont myIcon">&#xe61e;</span>
                          <span className="iconfont myIcon">&#xe78a;</span>
                          
                          <div className="broadCastWrap">
                          <span className="iconfont broadIcon" id="broadIcon" onClick={this.broadcast.bind(this)}>&#xe633;</span>
                          <span className="iconfont CloseIcon" id="CloseIcon" onClick={this.pause.bind(this)}>&#xe810;</span>
                          </div>
                         
                          <span className="iconfont myIcon">&#xe7a5;</span>
                          <span className="iconfont myIcon">&#xe634;</span>
                        
                          
                   </div>
            </div>
        )
    }
}

export default withRouter(BroadCast)